<template>
    <header>
        <div class="banxin tanxin header_box">
            <h1></h1>
            <ul class="daohang">
                <li class="avater_li" @click="$router.push('/home')">发现音乐</li>
                <li @click="$router.push('/myyinyue')">我的音乐</li>
                <li>关注</li>
                <li>商城</li>
                <li>音乐人</li>
                <li>下载客户端</li>
            </ul>
            <div class="serch">
                <input type="text" placeholder="音乐/视频/电台/用户" v-model="Valtxt" @click="sousuo">
            </div>
            <div class="m-topvd">创作者中心</div>
            <div class="btn" @click="goLogin" v-if="userUrl === null">登录</div>
            <div class="denlu" v-else>
                <div class="tou" @mouseenter="listShow=true" >
                    <img :src="userUrl" alt="">
                    <span></span>
                </div>
                <div class="guanli">
                    <ul v-show="listShow" @mouseleave="listShow =false">
                        <li>我的消息<span></span></li>
                        <li>我的等级</li>
                        <li>vip会员</li>
                        <li>个人设置</li>
                        <li>实名认证</li>
                        <li @click="outLogin">退出</li>
                    </ul>
                </div>
            </div>
        </div>

    </header>
</template>

<script>
import{yonghu,outlogin} from "@/request/api"
export default {
    data() {
        return {
            userUrl:sessionStorage.getItem('avatarUrl'),
            listShow:false,
            Valtxt: "" 
        }
    },
    methods: {
        goLogin() {
            // console.log(1);
            this.$store.commit('changeIsLogin', true)
        },
        outLogin(){
            outlogin().then(res =>{
                console.log(res);
                if(res.data.code ===200){
                    sessionStorage.clear();
                }
            })
        },
        sousuo() {
      if (this.Valtxt.trim() == "") {
        return;
      } else {
        this.$router.push("/sousuo");
        this.$store.commit("chagesousuo", this.Valtxt);
      }
    }
    },
    created(){
        if(sessionStorage.getItem('userid')){
            yonghu(sessionStorage.getItem('userid')).then(res =>{
                console.log(res);
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

header {
    background: @black;
    height: 70px;
    color: #FFFEFE;
    font-size: 14px;

    .header_box {
        align-items: center;
        height: 70px;

        h1 {
            width: 177px;
            height: 69px;
            padding-right: 20px;
            background-image: url(../assets/topbar.png);
            background-size: 260px 220px;
            background-position: 0 0;
        }

        .daohang {
            display: flex;
            height: 70px;
            align-items: center;

            li {
                padding: 0px 20px;
                height: 70px;
                line-height: 70px;
                box-sizing: border-box;
                cursor: pointer;

                &:hover {
                    background-color: #000;
                }

                &.avater_li {
                    background-color: #000;
                }
            }
        }

        .serch {
            input {
                padding-left: 25px;
                width: 158px;
                height: 32px;
                border-radius: 16px;
                font-size: 12px;
                border: 0;
                background-image: url(../assets/topbar.png);
                background-size: 260px 210px;
                background-position: -3px -94px;
                outline: none;
            }
        }

        .m-topvd {
            width: 90px;
            height: 32px;
            font-size: 12px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #4F4F4F;
            line-height: 32px;
            color: #ccc;
            border-radius: 20px;
            cursor: pointer;

            &:hover {
                border-color: #FFF;
            }
        }

        .btn {
            font-size: 7px;
            color: #787878;
            cursor: pointer;

            &:hover {
                color: #ccc;
                text-decoration: underline;
            }
        }
        .denlu{
            .tou {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .guanli {
            position: relative;
            ul {
                z-index: 99;
                width: 158px;
                // height: 400px;
                position: absolute;
                top: 7px;
                left: -50px;
                border: 1px solid #000;
                // display: none;
            }

            li {
                width: 158px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                font-size: 12px;
                color: #ccc;
                background-color: #333;
                &:hover{
                    background-color: #787878;
                }
                
                
            }
        }
        }
        
    }
}
</style>